<template>
  <div class="login">
      <div class="login-box">
          <div>
<img src="../assets/u3.png" alt="">
          <p>贵池区农村饮水安全工程信息化综合管理平台</p>
          </div>
          <!--表单区域 -->
      <el-form class="form" :model="formmsg" ref="loginformRef" :rules="loginRules">
        <!-- 账号 -->
        <el-form-item prop="loginname">
          <el-input prefix-icon="el-icon-user-solid" class="ipt"  v-model="formmsg.loginName" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" prefix-icon="el-icon-lock" class="ipt"  v-model="formmsg.password" ></el-input>
        </el-form-item>
        <template>
  <!-- `checked` 为 true 或 false -->
         <el-checkbox class="chb" v-model="checked" >记住密码</el-checkbox>
     </template>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button   class="btn"  @click="login">登录</el-button>
        </el-form-item>
      </el-form>
      </div>
  </div>
</template>

<script>
// import qs from 'qs'
// axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.transformRequest=[function(data){return Qs.stringify(data)}];
// import  axios from 'axios'
// import { log } from 'util'
export default {
data(){
    return{
      checked: true,
         formmsg: {
        loginName: '',
        password: '',
      
      },
         //   数据的校验规则
      loginRules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    }
    },
    //  页面加载调用获取cookie值
// mounted(){
//     this.getCookie()
//     },
    //页面加载调用获取cookie值
// created(){
//     this.getCookie()
//     },

methods: {


// 登录
    login() {
      // 发送请求之前先对表单进行预校验
      this.$refs.loginformRef.validate(async(valid) => {
        // console.log(valid);
        // valid 是一个布尔值true表示表单预校验通过,可以发送请求,false表示没有通过表单验证,不允许发送请求
        if (!valid) return;
        // console.log(this); // vue实例
        const { data: res } =  await this.$http.post("/loginUser/login",this.formmsg );
        //   console.log(res);
        if (res.cood!= 200) {
          this.$message.error("登录失败");
    }else{
      if(this.checked=true){
      //传入账号名，密码，和保存天数3个参数
     this.setCookie(this.formmsg.loginName,this.formmsg.password);
    }else{
this.clearCookie()
    }
        // console.log(res);
        // 在登录成功之后将返回的token令牌保存在本地
        // sessionStorage.setItem("token", res.data.token);
        // 跳转到home页面 编程式导航
        this.$router.push("/home");
        this.$message.success("登录成功");
      }
      });
  },
//设置cookie
 setCookie(c_name,c_pwd,exdays) {
  var exdate=new Date();//获取时间
  exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
  //字符串拼接cookie
  window.document.cookie="this.formmsg.loginName"
  + "=" +c_name+";path=/;expires="
  +exdate.toGMTString();
  window.document.cookie="this.formmsg.password"
  +"="+c_pwd+";path=/;expires="
  +exdate.toGMTString();
 },
 //读取cookie
//  getCookie:function () {
//    console.log(getCookie);
//   if (document.cookie.length>0) {
//    var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
//    for(var i=0;i<arr.length;i++){
//     var arr2=arr[i].split('=');//再次切割
//     //判断查找相对应的值
//     if(arr2[0]=='c_name'){
//      this.formmsg.loginName=arr2[1];//保存到保存数据的地方
//     }else if(arr2[0]=='c_pwd'){
//      this.formmsg.password=arr2[1];
//     }
//    }

//   }
//  },
 
 //清除cookie
 clearCookie () {
  this.setCookie("","",-1);//修改2值都为空，天数为负1天就好了
 }
},



   
    // }
}

</script>

<style lang="less" scoped>
.login{
    background: url(../assets/u1.jpg) center center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    .login-box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: rgba(255,255,255,0.4);
        width: 761px;
        height: 576px;
        img{
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        p{
            text-align: center;
            line-height: 200px;
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
            font-weight: 700;
            font-style: normal;
            font-size: 34px;
            color: #456983;
        }
         
    }
/deep/.form {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
    // bottom: 50%;
    // width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
    // .btns {
    //   height: 50px;
    //   width: 100px;
    // }
    .ipt{
        height: 60px;
        // width: 100px;
        margin: 5px;
     
    }
    .btn{
       height: 60px;
        width: 670px;
        // position: absolute;
    // bottom:-80px;
    // right:-20px;
    font-style: normal;
    font-size: 24px;
    color: #FFFFFF;
    // top: 20px;
    // left: 6px;
    margin: 20px auto;
    background: rgb(10, 167, 232);
    border: none;
    }
    .chb{
    position: absolute;
    bottom:130px;
    right:40px;
}
  }
  /deep/.el-icon-user-solid
  {
    font-size: 25px;
  }
  /deep/.el-icon-lock{
font-size: 25px;
  }
}
</style>